<template>
	<view class="bg">
		<xl-navbar title="Popup 弹出层" fixed shadow></xl-navbar>
		<view class="title">基础样式</view>
		<xl-popup v-model="show" :direction="direction">
			<view class="box">Popup 弹出层</view>
		</xl-popup>
		
		<xl-popup v-model="show1" size="90%" borderRadius="10" :modalClose="false">
			<view class="box">Popup 弹出层</view>
			<xl-button text="关闭" @click="close" type="primary"></xl-button>
		</xl-popup>
		
		<xl-popup v-model="show2" direction="bottom" :borderRadius="[20,20,0,0]" background="#0a93ff" :beforeClose="beforeClose">
			<view class="box" style="color: #ffffff;">Popup 弹出层</view>
		</xl-popup>
		
		<xl-list-item title="默认弹出:居中" arrow @click="clickPopup(1)"></xl-list-item>
		<xl-list-item title="顶部弹出" arrow @click="clickPopup(2)"></xl-list-item>
		<xl-list-item title="左边弹出" arrow @click="clickPopup(3)"></xl-list-item>
		<xl-list-item title="右边弹出" arrow @click="clickPopup(4)"></xl-list-item>
		<xl-list-item title="下边弹出" arrow @click="clickPopup(5)"></xl-list-item>
		<xl-list-item title="大小、圆角、禁止点击遮罩关闭" arrow @click="clickPopup1"></xl-list-item>
		<xl-list-item title="背景色、上圆角、关闭前钩子函数" arrow @click="clickPopup2"></xl-list-item>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const show = ref(false)
	const show1 = ref(false)
	const show2 = ref(false)
	
	const direction = ref('center')
	function clickPopup(index){
		if(index == 1) direction.value = 'center'
		else if(index == 2) direction.value = 'top'
		else if(index == 3) direction.value = 'left'
		else if(index == 4) direction.value = 'right'
		else if(index == 5) direction.value = 'bottom'
		show.value = true
	}
	
	
	function clickPopup1(){
		show1.value = true
	}
	function close(){
		show1.value = false
	}
	
	function clickPopup2(){
		show2.value = true
	}
	
	function beforeClose(done){
		uni.$xl.toast("关闭前处理钩子")
		// 注意：处理完执行done方法
		done()
	}
</script>

<style lang="scss" scoped>
	.box{
		margin: 30rpx;
	}
</style>